<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blogs</title>
    <link href="{% static 'css/blog/index.css' %}" rel="stylesheet">
    <link href="https://lib.baomitu.com/layui/2.7.6/css/layui.min.css" rel="stylesheet">
</head>
<body>
<form class="layui-card layui-form layui-col-md6  layui-col-sm9 layui-col-xs11 search-container" action="">
    <button class="layui-btn" lay-submit lay-filter="formDemo"><i class="layui-icon layui-icon-search"></i></button>
    <input type="text" name="q" placeholder="请输入搜索内容" autocomplete="off" class="layui-input" value="{{ query }}">
</form>
{% if query %}
<div class="blog-container">
    {% load highlight %}
    {% for article in page.object_list %}
        <div class="layui-panel panel">
            <a href="{{ article.object.url }}"><h2>{% highlight article.object.title with query %}</h2></a>
            <hr>
            <a href="{{ article.object.url }}"><p class="preview">{% highlight article.object.preview with query %}</p></a>
            <hr>
            <div>
                文章标签:
                {% for tag in article.object.tags.all %}
                    <span class="tag layui-badge-rim">{% highlight tag.tag with query %}</span>
                {% empty %}
                    无
                {% endfor %}
            </div>
            <br>
            <div class="blog-info">
                <a href="{{ article.object.author.url }}" target="_blank"><span><div class="time"><i class="layui-icon layui-icon-username"></i> {{ article.object.author.username }}</div></span></a>
                <span><div class="time"><i class="layui-icon layui-icon-time"></i> {{ article.object.date }}</div></span>
                <span><i class="layui-icon layui-icon-heart layui-font-red" id="like-icon"></i>&nbsp;{{ article.object.likes_number }}</span>
                <span><i class="layui-icon layui-icon-reply-fill"></i>&nbsp;{{ article.object.comments.count }}</span>
            </div>
        </div>
    {% endfor %}
</div>
{% else %}
<div class="blog-container">
    {% for article in page %}
        <div class="layui-panel panel">
            <a href="{{ article.url }}"><h2>{{ article.title }}</h2></a>
            <hr>
            <a href="{{ article.url }}"><p class="preview">{{ article.preview }}</p></a>
            <hr>
            <div>
                文章标签:
                {% for tag in article.tags.all %}
                    <span class="tag layui-badge-rim">{{ tag.tag }}</span>
                {% empty %}
                    无
                {% endfor %}
            </div>
            <br>
            <div class="blog-info">
                <a href="{{ article.author.url }}" target="_blank"><span><div class="time"><i class="layui-icon layui-icon-username"></i> {{ article.author.username }}</div></span></a>
                <span><div class="time"><i class="layui-icon layui-icon-time"></i> {{ article.date }}</div></span>
                <span><i class="layui-icon layui-icon-heart layui-font-red" id="like-icon"></i>&nbsp;{{ article.likes_number }}</span>
                <span><i class="layui-icon layui-icon-reply-fill"></i>&nbsp;{{ article.comments.count }}</span>
            </div>
        </div>
    {% endfor %}
</div>
{% endif %}
<div id="pagination"></div>
<script src="https://lib.baomitu.com/layui/2.7.6/layui.min.js"></script>
<script>
    layui.use('laypage',
        function() {
            layui.laypage.render({
            elem: 'pagination',
            count: {{ page.paginator.num_pages }},
            jump: (page, first) => {
                if (!first){window.location.href = `/blog/?page=${page.curr}&q={{ query }}`}
            },
            curr: {{ page.number }},
        });
    });
</script>
</body>
</html>